<template>
	<view
		class="e-column-notice"
		@tap="clickHandler"
	>
		<slot name="icon">
			<view
				class="e-column-notice__left-icon"
				v-if="icon"
			>
				<e-icon
					:name="icon"
					:color="color"
					size="19"
				></e-icon>
			</view>
		</slot>
		<swiper
			:disable-touch="disableTouch"
			:vertical="step ? false : true"
			circular
			:interval="duration"
			:autoplay="true"
			class="e-column-notice__swiper"
			@change="noticeChange"
		>
			<swiper-item
				v-for="(item, index) in text"
				:key="index"
				class="e-column-notice__swiper__item"
			>
				<text
					class="e-column-notice__swiper__item__text e-line-1"
					:style="[textStyle]"
				>{{ item }}</text>
			</swiper-item>
		</swiper>
		<view
			class="e-column-notice__right-icon"
			v-if="mode&&['link', 'closable'].includes(mode)"
		>
			<e-icon
				v-if="mode === 'link'"
				name="arrow-right"
				:size="17"
				:color="color"
			></e-icon>
			<e-icon
				v-else
				name="close"
				:size="16"
				:color="color"
				@click="close"
			></e-icon>
		</view>
	</view>
</template>

<script lang="ts">
	import {defineComponent} from 'vue'
	import mpMixin from '../../../libs/mixin/mpMixin'
	export default defineComponent({
		name: "column-notice",
		mixins: [mpMixin]
	});
</script>

<script lang="ts" setup>
	import {watch,computed} from 'vue'
	import {columnNoticeProps,columnNoticeEmits} from './props';
	import {
		isArray
	} from "../../../libs/utils";
	import {
		throwError,
		addUnit
	} from '../../../libs/utils/_utils'
	const props = defineProps(columnNoticeProps)
	const emit = defineEmits(columnNoticeEmits)
	
	const textStyle = computed(() => {
		return {
			color:props.color,
			fontSize:addUnit(props.fontSize)
		}
	})
	
	watch(() => props.text,(v) => {
		if(!isArray(v)){
			throwError('ENoticebar', 'e-notice-bar组件direction为column时，要求text参数为数组形式')
		}
	})
	let index = 0
	
	const noticeChange = (e:{detail:{current:number}}) =>{
			index = e.detail.current
		}
		// 点击通告栏
	const clickHandler = () => {
			emit('click', index)
		}
		// 点击关闭按钮
	const close = () => {
			emit('close')
		}
	
</script>

<style lang="scss" scoped>
	@import '../../../libs/theme/column-notice.scss';
</style>
